<template>
	<div class="my-study">
		<div class="cont-title">
			<span>最近学习</span>
			<el-popover placement="right" width="400" trigger="click">
				<div class="class-type"></div>
				<el-button slot="reference">全部课程</el-button>
			</el-popover>
		</div>
		<div class="study-list" v-if="list.length != 0">
			<div class="study-item" v-for="item in list">
				<div class="study-time">
					<p class="time-year" v-for="i in item.timer">{{i}}</p>
					<!-- <p class="time-date">6月15日</p> -->
				</div>
				<div class="item-img">
					<el-image style="width: 100%; height: 100%" :src="item.logoUrl" fit="cover"></el-image>
				</div>
				<div class="item-cont">
					<div class="item-title">{{item.lessonName}}</div>
					<div class="item-intro">
						<span v-if="item.updateSchedule">更新至{{item.updateSchedule}}</span>
					</div>
					<div class="item-subheader">
						<div class="item-types">
							<div class="study-num">已学{{item.schedule}}%</div>
							<div class="study-item-time">用时{{getTime(item.lessonTime)}}<span
									v-if="item.nextText">，学习至{{item.nextText}}</span></div>
						</div>
						<div class="item-btn" @click="goNext(item)">继续学习</div>
					</div>
				</div>
			</div>

		</div>
		<div class="study-list" v-else>
			<el-empty description="暂无学习课程"></el-empty>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		getMyLessonApi,
		studyLearningApi
	} from '@/api/Lesson.js'
	export default {
		data() {
			return {
				list: [],
				pageSize: 10,
				pageNum: 1,
				total: 0
			}
		},
		created() {
			this.getMyLesson()
		},
		methods: {
			goNext(item) {
				studyLearningApi({
					uerslessonId: item.userLessonId
				}).then(res => {
					let data = res.data
					this.$router.push({
						path: '/VideoDetails',
						query: {
							chapterId: data.chapterId,
							lessonId: data.lessonId
						}
					})
				})

			},
			pageNumChange(index) {
				this.pageNum = index
				this.getMyLesson()
			},
			getMyLesson() {
				getMyLessonApi({
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {
					let list = res.rows
					if(list && list.length != 0) {
						for (let i = 0; i < list.length; i++) {
							list[i].timer = this.formatTime(list[i].updateTime)
						}
					}
					this.list = list
				})
			},
			formatTime(time) {
				if (!time) {
					return false
				}
				let date = new Date(time),
					yy = date.getFullYear(),
					mm = date.getMonth() - 1,
					dd = date.getDate()
				return [yy, mm + '月-' + dd + '日']
			},
			getTime(time) {
				var secondTime = parseInt(time); // 秒
				var minuteTime = 0; // 分
				var hourTime = 0; // 小时
				if (secondTime > 60) {
					minuteTime = parseInt(secondTime / 60);
					//获取秒数，秒数取余，得到整数秒数
					secondTime = parseInt(secondTime % 60);
					//如果分钟大于60，将分钟转换成小时
					if (minuteTime > 60) {
						//获取小时，获取分钟除以60，得到整数小时
						hourTime = parseInt(minuteTime / 60);
						//获取小时后取余的分，获取分钟除以60取余的分
						minuteTime = parseInt(minuteTime % 60);
					}
				}
				let str = ''
				str += hourTime ? hourTime + '小时' : ''
				str += minuteTime ? minuteTime + '分钟' : ''
				str += secondTime ? secondTime + '秒' : ''
				return str
			}
		}
	}
</script>
<style lang="less" scoped>
	.my-study {
		padding: 0 58px;

		.cont-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		.study-item {
			position: relative;
			padding: 27px 0 27px 152px;
			display: flex;
			align-items: center;
			// border-bottom: 1px solid #eee;
			cursor: pointer;

			&::before {
				display: block;
				content: "";
				width: 9px;
				height: 9px;
				border-radius: 9px;
				background-color: #d8d8d8;
				position: absolute;
				top: 32px;
				left: 76px;
			}

			&:not(:last-child)::after {
				display: block;
				content: "";
				width: 1px;
				height: 100%;
				background-color: #d8d8d8;
				position: absolute;
				top: 32px;
				left: 80px;
			}
		}

		.study-time {
			position: absolute;
			top: 27px;
			left: 0;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #999999;

			.time-year {
				font-size: 16px;
				line-height: 22px;

				&:nth-of-type(2) {
					font-size: 12px;
					line-height: 17px;
				}
			}

			.time-date {}

		}



		.item-img {
			width: 213px;
			height: 144px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 18px;
		}

		.item-cont {
			flex: 1;
		}

		.item-title {
			margin-bottom: 10px;
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 26px;
		}

		.item-intro {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			min-height: 16px;
			color: #666666;
			margin-bottom: 57px;
		}

		.item-subheader {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.item-btn {
			width: 88px;
			height: 30px;
			background: #2360FE;
			border-radius: 15px;
			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 13px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.item-types {
			display: flex;
			align-items: center;
		}

		.study-num {
			// width: 78px;
			padding: 0 8px;
			height: 30px;
			background: #F4F8FF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 18px;
		}

		.study-item-time {
			font-size: 12px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.page-cont {
			width: 100%;
			padding: 38px 0 46px;
			display: flex;
			justify-content: center;
		}
	}
</style>